<template>
  <div id="IndexWS">
    <div class="head-icon">
      AntV 
    </div>
    <div class="con">
      <!-- <div id="container" style="flex: 1"></div> -->
      <antv-process 
        style="flex: 1"
        ref="antv"
        :fromData="fromData"
        @fromJSON="fromJSON"
      >
      </antv-process>
    </div>

    <div class="btn_all">
      <el-button type="primary" @click="btnXiazai">下载</el-button>
      <el-button type="primary" @click="btnJiedian">添加节点</el-button>

      <el-button type="primary" @click="btnChakan">保存(1渲染2更新)</el-button>
      <el-button type="primary" @click="btnXuanran">渲染</el-button>
      <el-button type="primary" @click="btnGengxin">更新</el-button>
    </div>

    <div class="con">
      <div id="container2" style="flex: 1"></div>
    </div>


    <el-dialog
      title="选择工序添加"
      @close="close"
      :visible.sync="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="500px"
      append-to-body
    >
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import { Graph, Shape, DataUri } from '@antv/x6';// Shape定义了节点和边共同属性和方法\DataUri下载
import AntvProcess from './antvProcess.vue'

export default {
  name: 'IndexWS',
  components: {
    AntvProcess
  },
  data () {
    return {
      fromData: '{"cells":[{"position":{"x":140,"y":120},"size":{"width":100,"height":60},"attrs":{"text":{"text":"OP10机加工"},"body":{"stroke":"#e6e6e6","fill":"#ffffff","rx":5,"ry":5}},"visible":true,"shape":"rect","id":"node1","zIndex":1,"tools":{"items":[],"name":null},"ports":{"groups":{"left":{"position":{"name":"left"},"attrs":{"circle":{"r":3,"magnet":true,"stroke":"#e6e6e6","strokeWidth":2,"fill":"#fff"}}},"right":{"position":{"name":"right"},"attrs":{"circle":{"r":3,"magnet":true,"stroke":"#e6e6e6","strokeWidth":2,"fill":"#fff"}}}},"items":[{"id":"port1","group":"left"},{"id":"port2","group":"right"}]}},{"position":{"x":300,"y":170},"size":{"width":100,"height":60},"attrs":{"text":{"text":"OP20打磨"},"body":{"stroke":"#e6e6e6","fill":"#ffffff","rx":5,"ry":5}},"visible":true,"shape":"rect","id":"node2","zIndex":2,"tools":{"items":[],"name":null},"ports":{"groups":{"left":{"position":{"name":"left"},"attrs":{"circle":{"r":3,"magnet":true,"stroke":"#e6e6e6","strokeWidth":2,"fill":"#fff"}}},"right":{"position":{"name":"right"},"attrs":{"circle":{"r":3,"magnet":true,"stroke":"#e6e6e6","strokeWidth":2,"fill":"#fff"}}}},"items":[{"id":"port1","group":"left"},{"id":"port2","group":"right"}]}},{"shape":"edge","attrs":{"line":{"stroke":"#1890FF","strokeWidth":1,"targetMarker":{"name":"classic","size":7}}},"id":"000c079c-118d-46c7-933c-523ed64fe978","connector":"smooth","zIndex":3,"source":{"cell":"node1","port":"port2"},"target":{"cell":"node2","port":"port1"}}]}',

      graphConfigure: {
        container: undefined,
        autoResize: true,//监听容器大小改变，并自动更新画布大小
        // width: 900,
        height: 350,
        background: {
          color: '#F5F5F6', // 设置画布背景颜色
        },
        // grid: true,//网格线
        resizing: {   //启用调整节点大小的功能。
          enabled: true,
        },
        scroller: { 
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false,
        },
        mousewheel: {// 滚轮缩放
          enabled: true,
          modifiers: ['ctrl', 'meta'],
        },
        connecting: { //连线选项
          snap: true, //自动吸附
          allowBlank: false,// 是否允许连接到画布空白位置的点
          allowNode: false,// 是否允许边链接到节点（非节点上的链接桩）
          allowEdge: false,// 是否允许边链接到另一个边
          createEdge() {   // 配置连接线样式
            return new Shape.Edge({
              connector: 'smooth',// 平滑连接器
              attrs: {
                line: {
                  stroke: '#1890FF',
                  strokeWidth: 1,
                  targetMarker: {
                    name: 'classic',
                    size: 7,
                  },
                },
              },
            })
          },
        }
      },
      getfromJSON: undefined,
      graph2: undefined,

      open:false,
      options: [{
        value: '3',
        label: 'OP30清洗'
      }, {
        value: '4',
        label: 'OP40装配'
      }, {
        value: '5',
        label: 'OP50测试'
      }],
      value: ''
    }
  },
  methods: {
    // 添加节点
    btnJiedian(){
      this.open = true
    },
    submit(){
      let label = ''
      this.options.forEach(item => {
        if(item.value == this.value){
          label = item.label
          item.disabled = true
        }
      })
      // 传入节点名字和唯一的id
      this.$refs.antv.btnJiedian(this.value,label);
      this.close();
    },
    close(){
      this.open = false;
      this.value = ''
    },

    // 获取保存(1渲染2更新)数据
    btnChakan(){
      this.$refs.antv.btnChakan();
    },
    fromJSON(getfromJSON){
      this.getfromJSON = getfromJSON;
      console.log('json数据：',JSON.parse(getfromJSON));
    },

    //渲染
    btnXuanran(){
      this.graphConfigure.container = document.getElementById('container2')
      this.graph2 = new Graph(this.graphConfigure)

      // 添加事件
      this.addNode();
      this.addEdge();

      let data = JSON.parse(this.getfromJSON)
      this.graph2.fromJSON(data) 
    },
    // 对节点添加事件
    addNode(){
      // 对节点添加鼠标移入事件
      // this.graph2.on('node:mouseenter', ({ node }) => {
      //   node.addTools({
      //     name: 'button-remove',
      //     args: {
      //       x: 0,
      //       y: 0,
      //       offset: { x: 12, y: 9 },
      //     },
      //   })
      // })
      // 对节点添加鼠标移出事件
      this.graph2.on('node:mouseleave', ({ node }) => {
        node.removeTool('button-remove');
      })

      // 对节点添加鼠标双击事件
      this.graph2.on('node:dblclick', ({ node, e }) => {
        console.log(e,'666666');
        node.removeTool('node-editor')
        node.addTools({
          name: 'node-editor',
          args: {
            event: e,
            attrs: {
              backgroundColor: '#1890FF',
            },
          },
        })
      })

      // 对节点添加鼠标右键事件
      this.graph2.on('node:contextmenu', ({ node, e }) => {
        node.addTools({
          name: 'button-remove',
          args: {
            x: 0,
            y: 0,
            offset: { x: 12, y: 9 },
          },
        })
      })

    },
    // 边（连接线）添加事件
    addEdge(){
      /* 连接线添加鼠标移入事件 */
      this.graph2.on('edge:mouseenter', ({ edge }) => {
          edge.addTools([
            {
              name: 'button-remove',
              args: {
                distance: '50%',
                offset: 0,
              }
            }
          ])
      })
      /* 连接线添加鼠标移出事件 */
      this.graph2.on('edge:mouseleave', ({ edge }) => {
        edge.removeTools()
      })
    },

    // 更新
    btnGengxin(){
      let data = JSON.parse(this.getfromJSON)
      this.graph2.fromJSON(data) 
    },

    // 下载
    btnXiazai(){
      this.$refs.antv.btnXiazai();
    },
  }
}
</script>
<style scoped="scoped">
  
#IndexWS{
  width: 75%;
  margin: 0 auto;
}
.head-icon{
  font-size: 36px;
  background: #aabbcc;
}
.btn_all{
  padding: 15px;
}
.con{
  display: flex;
  justify-content: center;
  padding: 30px;
  border: 1px solid #e6e6e6
}
</style>
